<template>
    <div>
        <Info v-model="info"></Info>
        <Payment v-model="info"></Payment>
        <!-- <Invoice v-model="invoiceList"></Invoice> -->
    </div>
</template>
<script>
import Info from "../info";
import Payment from "../payment";
import Invoice from "../invoice";
export default {
    name: "",
    components: { Info, Payment, Invoice },
    mixins: [],
    props: {
        value: {
            type: Object,
            required: true,
        },
        invoiceList: {
            type: Array,
            required: false,
        },
    },

    data() {
        return {
            loading: false,
        };
    },
    computed: {
        info: {
            get() {
                return this.useVModel.call(this);
            },
            set(val) {
                this.$emit("input", val);
            },
        },
    },
    watch: {},
    mounted() {
        // this.getList();
        // this.getInvoice();
    },
    methods: {
        getList() {
            this.loading = true;
            apis?.Info(this.paymentId)
                .then((res) => {
                    if (res.code == 200) {
                        this.info = res.data ?? {};
                    }
                })
                .finally(() => {
                    this.loading = false;
                });
        },
        getInvoice() {
            let params = {
                paymentId: this.paymentId,
            };
            apis?.Invoice(params).then(async (res) => {
                if (res.code == 200) {
                    this.invoiceList = res.rows;
                    for (
                        let index = 0;
                        index < this.invoiceList.length;
                        index++
                    ) {
                        const element = this.invoiceList[index];
                        if (element?.imgId) {
                            await listByIds(element?.imgId).then((res) => {
                                element.__imgUrl = res.data?.[0]?.url ?? "";
                            });
                        }
                    }
                    console.log(this.invoiceList);
                }
            });
        },
    },
};
</script>
<style lang="scss" scoped>
.chunk {
    overflow: hidden;
    background-color: #fff;
    border-radius: 4px;
    padding: 15px;
    margin: 15px;
    box-sizing: border-box;
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    .title {
        border-bottom: 1px solid #ccc;
        padding: 10px 0;
    }
    .container_detail {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        padding: 25px 0;
        gap: 25px;
        .item {
            display: flex;
            font-size: 16px;
            // align-items: center;
            font-size: 14px;
            .label {
                margin-right: 10px;
                vertical-align: middle;
                width: 80px;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 14px;
                color: #8c8c8c;
                line-height: 20px;
                text-align: left;
                font-style: normal;
                white-space: nowrap;
            }
            .content {
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 14px;
                color: #333333;
                line-height: 20px;
                text-align: left;
                font-style: normal;
            }
        }
    }
    .container_invoice {
        display: flex;
        margin-bottom: 15px;
        .preview {
            flex: 1;
            // width: 300px;
            display: flex;
            flex-direction: column;
            align-items: center;
            .container_preview {
                padding: 25px 0;
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                // margin-top: 25px;
                width: 180px;
                .image {
                    aspect-ratio: 16/9;
                }
                .handleBtn {
                    display: flex;
                    justify-content: space-around;
                }
            }
        }
        .container_detail {
            flex: 2;
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }
}
.empty {
    font-size: 14px;
    text-align: center;
    padding: 20px;
}
</style>
